import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from './components/DayBill'
const Month = () => {
    // redux中拿到的数据
    const billList = useSelector(state => state.bill.billList)
    // 类似vue中的watch
    const monthGroup = useMemo(() => {
        // return出去按月分组之后的值
        return _.groupBy(billList, (item) => dayjs(item.date).format("YYYY-MM"))
    }, [billList])

    const [showDateSelect, setShowDateSelect] = useState(false);
    const [date, setDate] = useState(() => dayjs(new Date()).format("YYYY-MM"));
    const [monthResult, setMonthResult] = useState({})
    const [currentMonthList, setMonthList] = useState([])

    // 监听date和monthGroup变化
    useEffect(() => {
        setMonthList(monthGroup[date])
        if (monthGroup[date]) {
            setMonthResult({
                pay: monthGroup[date].filter((item) => item.type === 'pay').reduce((a, c) => a + c.money, 0),
                income: monthGroup[date].filter((item) => item.type === 'income').reduce((a, c) => a + c.money, 0),
                total: monthGroup[date].reduce((a, c) => a + c.money,0)
            })
        } else {
            setMonthResult({ pay: 0, income: 0, total: 0 })
        }
    }, [date, monthGroup])

    const handleConfirm = (value) => {
        const formatDate = dayjs(value).format("YYYY-MM")
        setDate(formatDate)
        setShowDateSelect(false)
    }

    const dayGroup = useMemo(() => {
        // return出去按日分组之后的值
        const groupData = _.groupBy(currentMonthList, (item) => dayjs(item.date).format("YYYY-MM-DD"))
        const keys = Object.keys(groupData)
        return {
            groupData,
            keys
        }
    }, [currentMonthList])

    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date">
                        <span className="text">
                            {/* 2023 | 3月账单 */}
                            {date}
                        </span>
                        <span className={showDateSelect ? 'arrow expand' : 'arrow'} onClick={() => setShowDateSelect(true)}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{monthResult.pay}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.income}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.total}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        visible={showDateSelect}
                        onCancel={() => setShowDateSelect(false)}
                        onConfirm={handleConfirm}
                        max={new Date()}
                    />
                </div>

                {/* 单日列表统计 */}
                {
                    dayGroup.keys.map(key => {
                        return <DailyBill key={key} date={key} billList={dayGroup.groupData[key]} />
                    })
                }
            </div>
        </div >
    )
}
export default Month;